<template>
      <div>
<!--             <div style='display:none;'>
                  <div class="wrapDiv">
                        <input type='text' class='leftDiv' ref='inputRef' placeholder="请输入" />
                        <div class="rightDiv"> {{txt_data}} </div>
                  </div>

                  <van-button type="danger" @click="sendBtn">发送</van-button>
                  <van-button type="danger" @click="getBtn">获取</van-button>
            </div> -->

            <div class='searchBox'>
                  <van-search class='searchDiv'
                        v-model="searchValue"
                        show-action
                        placeholder='请输入商品名'
                        @search="onSearch"
                        >
                        <div slot="action" @click="onSearch">搜索</div>
                  </van-search>
            </div>

            <div class='scrollDiv'>
                  <!-- //轮播图 -->
                  <van-swipe :autoplay="1800" class='sliderDiv' >
                        <van-swipe-item v-for="(image, index) in sliderImgs" :key="index">
                              <img v-lazy="image" />
                        </van-swipe-item>
                  </van-swipe>
                  

                  <!-- 商品列表 -->
                  <div >
                        <div v-for='itemObj in goodsObj' class='wrapDiv cle goodsList'>
                              <!--相当于每一行itemObj都在goodsList_aa/bb/cc/dd中变量一遍-->
                              <van-sticky :offset-top="48"  >
                                    <h1 class='goodsTitle'>{{itemObj.n}}</h1>
                              </van-sticky> 

                              <li v-for='goods in itemObj.goodsList_aa'
                                    @click='goodsProductFn(goods)'>
                                    <label><img :src=goods.img /></label>
                                    {{goods.name}}/￥{{goods.price}}
                              </li>
                              
                              <li v-for='goods in itemObj.goodsList_bb' 
                                    @click='goodsProductFn(goods)'>
                                    <label><img :src= goods.img /></label>
                                    {{goods.name}}/￥{{goods.price}}
                              </li>

                              <li v-for='goods in itemObj.goodsList_cc'  
                                    @click='goodsProductFn(goods)'>
                                    <label><img :src= goods.img /></label>
                                    {{goods.name}}/￥{{goods.price}}
                              </li>

                              <li v-for='goods in itemObj.goodsList_dd'  
                                    @click='goodsProductFn(goods)'>
                                    <label><img :src= goods.img /></label>
                                    {{goods.name}}/￥{{goods.price}}
                              </li> 
                        </div>
                  </div>
            </div> 

            <footerBar></footerBar>

      </div>
</template>

<script>
import axios from 'axios'
import API_LIST from '@/APIList.config'
import footerBar from './footerBar'


export default {
      name: 'proShopCartDemo',
      data () {
            return {
                  // msg: '首页',

                  //退出登录显示与否
                  // isLogin : true,

                  //所有商品总的数据，包括栏目，栏目中的商品
                  goodsObj:'',
                  //搜索栏
                  searchValue:'',
                  //轮播图
                  sliderImgs:''

            }
      },
      components:{footerBar},
      created(){
            //轮播图
            axios.get(API_LIST.getImgUrls)
            .then(_d =>{
                  this.sliderImgs= _d.data.urls;
                  //console.log(this.sliderImgs)
            })
            
            //要把localStorage转成对象，才能作为对象使用

            if( localStorage.userName ){
                  let _str= JSON.parse(localStorage.userName);
                  this.$notify( _str.username + '您已经登录，欢迎回来！' );
                  // this.isLogin = false;
                  // this.msg ='用户名：'+ _str.username;
            }

            //获得商品大类
            this.getGoodsCategoryFn();
      },
      methods:{
            //商品详情页
            goodsProductFn(_self){
                  //console.log(_self)
            /*     this.$router.push({
                        name:'goodsProduct',
                        query:{_goodsObj:_self}
                  }) */
                  this.$router.push({
                        name:'goodsProduct',
                        query:{
                               _goodsObjId:_self._id,
                               _collectionsName:_self.category
                        }
                  })

            },

            // 获得商品列表-大类
            getGoodsCategoryFn(){
                  axios.get( API_LIST.getGoodsCategory )
                  .then( _d =>{
                        //表格式输出
                        // console.table( _d.data )
                        //console.log(_d.data)
                        //this.goodsCategoryData = _d.data;
                        this.goodsObj= _d.data;
                  })
            },


            // // 退出登录
            // logOutBtn(){
            //       localStorage.userName = '';
            //       this.isLogin = true;
            //       this.$notify( localStorage.userName + '您已经退出登录！' );
            // },


            getBtn(){
                  axios.get( API_LIST.node_b )
                        .then( _d=>{
                              //console.log( _d.data[0] );
                              this.$notify(this.searchValue+ _d.data[0].name);
                              this.searchValue='';

                        })
            },
            onSearch(){
                  //console.log(this.searchValue);
                  let _v = this.searchValue;

                  if(_v ==''|| _v==undefined){
                        this.$notify( '查询条件不能为空！' );
                  }else{
                        axios.get( API_LIST.node_a ,{
                              params:{ v_data : _v }
                        })
                        .then(()=>{
                              this.getBtn()})
                              
                        
                  }

            }

    }
}
</script>

<style scoped>
      .searchBox{
            width:100%;height:56px;background-color:#fff;
            position:fixed;left:0;top:0;z-index:5;
      }
      .searchDiv{
            position:fixed;left:0;top:0;
            width:100%; height:40px;margin-top:8px;z-index:5;
      }
      .scrollDiv{
            position:relative;top:48px; z-index:0
      }
    h1, h2 {
        font-weight: normal;
      }
      ul {
        list-style-type: none;
        padding: 0;
      }
      li {
        display: inline-block;
        margin: 0 10px;
      }
      a {
        color: #42b983;
      }
      .cle:after{
        content: '.';
        overflow: hidden;
        visibility: hidden;
        height: 0;
        display: block;
        clear: both;
      }
      .wrapDiv{
        width: 80%;overflow: hidden;border: 1px solid #eee;
        background: #eee;border-radius: 10px;
        margin:10px auto;
      }
      .wrapDiv p.tip{
        font-size: 22px;text-align: center;padding: 0;margin:5px 0;color: #eee;
      }
      .leftDiv{
        float: left;width: 60%;margin:10px;
        border-radius: 10px;border:1px solid #eee;
        padding:10px;line-height: 30px;text-align: center;
        font-size: 22px;
      }
      .rightDiv{
        float: right;width: 20%;margin:10px;
        border-radius: 10px;border:1px solid #eee;
        padding:10px;line-height: 30px;text-align: center;
        font-size: 22px;
      }
      .sliderDiv{
        width: 80%;margin:10px auto;
      }
      .sliderDiv img{width:100%;height:188px;}

      .goodsCategory{clear: both;margin: 10px 0;}
      .goodsCategory li{float: left; }
      .goodsCategory li img{
            width: 50px;height: 50px;border-radius: 10px;
            border:1px solid #eee;
          }
      .goodsList li{
          float: left;width: 49%;
          overflow: hidden;margin:0 0 10px 0;
          border-radius: 5px;
        }
      .goodsList li label{
            width: 120px;height: 130px;display: block;overflow: hidden;
            margin:0 auto;padding:0;text-align: center;position: relative;
            border:1px solid #eee;border-radius: 10px;
      }
      .goodsList li img{
        height:100%;
      position: absolute;top: -5px;left: 0;
        clear: both;display: block;margin:5px auto;padding:0;
      }
      .goodsList h1.goodsTitle{
           clear: both;margin:5px auto;font-size: 22px;border-radius: 5px;
           background: #AAAAAA;width:78%;color:#fff;padding:3px 0;
      }
      .sliderDiv{
        width: 90%;margin:10px auto;
      }
      .sliderDiv img{width:100%;height:188px;}
</style>
